import { Form, Popover, Select, Tag } from "antd";
import { InnerBanditConfig } from "./config";
import ArrayInput from "./ArrayInput";
import { RuleInfo, RuleList } from "./rule";


interface PopoverContentProps {
    rule: RuleInfo;
}

function PopoverContent(props: PopoverContentProps) {
    return (
        <div style={{ maxWidth: "300px", whiteSpace: "break-spaces", overflowY: "scroll", maxHeight: "calc(100vh - 200px)" }}>
            <p>{props.rule.titleCn}</p>
            <p>{props.rule.titleEn}</p>
            <p>{props.rule.descCn}</p>
            <p>{props.rule.descEn}</p>
        </div>
    );
}


interface GlobalPanelProps {
    cfg: InnerBanditConfig;
    onChange: (cfg: InnerBanditConfig) => void;
}

export default function GlobalPanel(props: GlobalPanelProps) {
    const setTestList = (valueList: string[]) => {
        const skipList = (props.cfg.skips ?? []).filter(ruleId => !valueList.includes(ruleId));
        props.onChange({ ...props.cfg, skips: skipList, tests: valueList });
    }
    const setSkipList = (valueList: string[]) => {
        const testList = (props.cfg.tests ?? []).filter(ruleId => !valueList.includes(ruleId));
        props.onChange({ ...props.cfg, skips: valueList, tests: testList });
    }

    return (
        <Form labelCol={{ span: 5 }}>
            <Form.Item label="目标路径(targets)">
                <ArrayInput valueList={props.cfg.targets ?? []} onChange={valueList => {
                    props.onChange({ ...props.cfg, targets: valueList });
                }} />
            </Form.Item>
            <Form.Item label="忽略路径(exclude_dirs)">
                <ArrayInput valueList={props.cfg.targets ?? []} onChange={valueList => {
                    props.onChange({ ...props.cfg, exclude_dirs: valueList });
                }} />
            </Form.Item>
            <Form.Item label="检查规则(tests)">
                <Select mode="multiple" value={props.cfg.tests ?? []} onChange={valueList => setTestList(valueList)}
                    tagRender={tagInfo => (
                        <>
                            {RuleList.filter(rule => rule.id == tagInfo.value).map(rule => (
                                <Popover key={rule.id} placement="bottom" trigger="hover" content={<PopoverContent rule={rule} />}>
                                    <Tag closable onClose={e => {
                                        e.stopPropagation();
                                        setTestList((props.cfg.tests ?? []).filter(ruleId => ruleId != rule.id));
                                    }}>{rule.id}</Tag>
                                </Popover>
                            ))}
                        </>
                    )}>
                    {RuleList.map(rule => (
                        <Select.Option key={rule.id} value={rule.id}>
                            <Popover placement="right" trigger="hover" content={<PopoverContent rule={rule} />} overlayStyle={{ zIndex: 2000 }}>
                                {rule.id} {rule.name}
                            </Popover>
                        </Select.Option>
                    ))}
                </Select>
            </Form.Item>
            <Form.Item label="忽略规则(skips)">
                <Select mode="multiple" value={props.cfg.skips ?? []} onChange={valueList => setSkipList(valueList)}
                    tagRender={tagInfo => (
                        <>
                            {RuleList.filter(rule => rule.id == tagInfo.value).map(rule => (
                                <Popover key={rule.id} placement="bottom" trigger="hover" content={<PopoverContent rule={rule} />}>
                                    <Tag closable onClose={e => {
                                        e.stopPropagation();
                                        setSkipList((props.cfg.skips ?? []).filter(ruleId => ruleId != rule.id));
                                    }}>{rule.id}</Tag>
                                </Popover>
                            ))}
                        </>
                    )}>
                    {RuleList.map(rule => (
                        <Select.Option key={rule.id} value={rule.id}>
                            <Popover placement="right" trigger="hover" content={<PopoverContent rule={rule} />} overlayStyle={{ zIndex: 2000 }}>
                                {rule.id} {rule.name}
                            </Popover>
                        </Select.Option>
                    ))}
                </Select>
            </Form.Item>
        </Form>
    );
}